/**
 * Created by Dalyn on 2017/5/8.
 */
import React from "react";
import Relay from "react-relay";
import ReactKey from "../../../../util/ReactKey";
import GetProcessDemand from '../mutation/ProcessDemandMutation/GetProcessDemand'  //读取图片
import '../css/otherRequirements.css'
import "../../css/productionManagement_common.css";
import Config from "../../../../util/Config";
import {Upload,message,Modal,Spin,Input,Button} from 'antd';
import {ViewImgList} from '../components/PackStep_Header';
export default class ProcessDemand extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            item:this.props.item,
            fileList:[],
            imgList:[],
            text:"",
            isPreview:false,
            previewImg:{curImgSrc:"",curImgName:""},
            isLoading:true
        };
        this.FixedImgSrc = Config.qiuniu;
        this.pdId = this.props.pdId;
        this.processDemandId = "";
    }

    componentDidMount(){
        let item = this.state.item;
        let  com_file = JSON.parse(item.fileJSON),
            con_img = JSON.parse(item.imgJSON);

        this.setState({
            isLoading:false,
            imgList:con_img,
            fileList:com_file,
            title:item.title,
            text:item.content,
        });
        this.processDemandId = item.othersId;
    }

    cancelPreview(){
        this.setState({
            isPreview:false
        })
    }
    handlePreview(index){
        this.setState({
            isPreview:true,
            previewImg: {
                curImgSrc: this.FixedImgSrc + this.state.imgList[index].file.response.key,
                curImgName: this.state.imgList[index].file.name
            }
        })
    }

    //sdd

    render(){
        const {fileList,isPreview,previewImg,imgList,title,text,isLoading} = this.state,
            {}  = this.props;

        return (
            <div className="poduction_otherReq_item production_otherReq_look" >
                <Spin
                    tip="加载中"
                    spinning={isLoading}
                >
                    <div className="production_otherReqLook_con">
                        <div>
                            <h3 className="production_otherReqLook_title">
                                {title}
                            </h3>

                            <p className="production_otherReqLook_titleText">
                                {text}
                            </p>
                        </div>

                        <div className="production_otherReqLook_look_clear production_look_pic">
                            {
                                imgList.length !==0 &&  imgList.map((item,index)=>
                                    <ViewImgList
                                        key={`img${index}`}
                                        imgSrc={this.FixedImgSrc + item.file.response.key}
                                        imgName={item.file.name}
                                        handlePreview={(e)=>this.handlePreview(index)}
                                        textValue={item.text}
                                    />
                                )
                            }
                        </div>

                      {/*  /!*上传文件*!/*/}
                        <div>
                            <Upload
                                key="fileList"
                                listType="text"
                                className="poduction_techRequ_updataFile"
                                fileList={fileList}
                            />
                        </div>
                    </div>
                </Spin>


                <Modal
                    className="production_preview"
                    visible={isPreview}
                    footer={null}
                    onCancel={this.cancelPreview.bind(this)}
                >
                    <img src={previewImg.curImgSrc} style={{ width: '100%' }} alt={previewImg.curImgName}/>
                </Modal>
            </div>
        )
    }
}